<template>
  <Layout ref="layout" title="wkwkw">
    <!-- <img alt="Vue logo" src="/src/assets/logo.png" /> -->
    <!-- <Link to="/page1">page1</Link> -->
    <router-link to="page1">page1</router-link>
    <router-link to="page2">page2</router-link>
    <router-link to="page3">page3</router-link>

    <div>
      HOME 当前时间：{{
        $utils.dayjs(state.time).format("YYYY/MM/DD hh:mm:ss")
      }}
    </div>
    <router-link to="login" v-if="!store.getters.currentUser.name"
      >login</router-link
    >

    <el-button @click="fetchd">fetch data</el-button>
    <el-button @click="emmitBus">emmit add Tab</el-button>

    <!-- 远程组件 -->
    <Remote.Layout class="nLayout">
      <div>

      <Remote.HelloWorld msg="haha_hello" />
      </div>
    </Remote.Layout>

    <!-- vant UI -->
    <van-button type="primary" size="small">van-button</van-button>
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>

    <!-- antd UI -->
    <a-button type="primary">Primary Button</a-button>


    <div style="height: 2000px">height:2000px</div>
    ----------
  </Layout>
</template>

<script>
export default{
  name:'home'
}
</script>

<script setup>
import api from "@/api/index";
import utils from "@/utils/index";

import Remote from "wk-remote-vue3-comps-ts";

import { useStore } from "vuex";
const { proxy } = getCurrentInstance();
const store = useStore();

// 手动添加tab
let emmitBus = () => {
  let name = '' + parseInt(Math.random()*1000)
  utils.eventEmitter.$emit("emmit-addTab",{
    title: 'New Tab' + name,
    name: 'New Tab' + name,
    url:''
    // content: "New Tab content",
  });
};

// 组件挂载后可以调用子组件方法及属性
let layout = ref(null);
onMounted(() => {
  // const { name, proxy } = layout.value;
  // console.log(name);
  let ins = proxy.$loading()
  setTimeout(() => {
    ins.close()
  }, 1000);

  // Remote.utils.aa()
});

// -----获取当前时间逻辑块-----
const state = reactive({
  time: new Date(),
});

let timeFun = setInterval(() => {
  state.time = new Date();
  // console.log("do timeFun");
}, 1000);

onUnmounted(() => {
  clearInterval(timeFun);
});
// -----获取当前时间逻辑块END-----

// -----获取数据逻辑块-----
let fetchd = () => {
  api.common.currentTermCalendar().catch((e) => {
    console.log("error");
    console.log(e);
  });
};
// -----获取数据逻辑块END-----

// 获取实例上的方法
// onMounted(() => {
//   // console.log("onMounted");
//   // proxy.$message("123adsf");
//   // proxy.$alert("123adsf");
// });

// pinia状态管理 快速使用
// import { userInfo } from "@/store/pinia/common";
// const userInfoStore = userInfo();
// const piniaState = reactive(userInfoStore);
</script>

<style lang="scss" scoped>
.child-layout{
  background-color: #fcc;
}
.nLayout{
  background-color: #c30c22;
}
</style>
